<template>
  <div class="item" @click="fn"> 
    <slot :name="flag ? 'activeImg' : 'normalImg'"></slot> 
    <p>
      <span :class="{ active: flag }">{{ title }}</span>
    </p>
  </div>
</template>

<script>
export default {
  props: ["title", "mark", "curr"],
  computed: {
    flag() {
      return this.mark == this.curr;
      
    },
  },
  methods: {
    fn() { 
      this.$emit("change", this.mark);

    
      if (this.mark == '/home') {
        this.$router.push('/home')
      }else if (this.mark == '/BookAndMovie') {
          this.$router.push('/BookAndMovie')
      }else if (this.mark == '/broadcast') {
        this.$router.push('/broadcast')
      }else if(this.mark == '/group'){
        this.$router.push('/group')
      }else{
        this.$router.push('/my')
      }
    },
  },
};
</script>

<style lang="less" scoped>
.item {
  flex: 1;
  text-align: center;
  img {
    width: 20px;
    height: 20px;
  }
  span {
    font-size: 10px;
    &.active {
      color: green;
    }
  }
}
</style>